<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1100px; 
            margin: 100px auto;  
        }
        .tb1 {
            width: 1000px;
            margin: auto;
            border-collapse:collapse;
            text-align: center
        }
        .tb1 caption {
            text-align: left;
        }
        .add{
            width: 1010px;
            border: 1px solid #666;
            margin: auto;
            display: none;
        }
        .add table {
            width: 800px;
            margin: 20px auto 0;
            border-collapse:collapse;
            text-align: center
        }
        .add p {
            padding-left:105px;
            margin: 10px 0 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <table border='1px' class='tb1'>
            <caption><button class='btn'>新增一行</button></caption>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <div class="add">
            <table border='1px'>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" class='userid'></td>
                        <td><input type="text" class='username'></td>
                        <td><select id="sel">
                            <option value="">男</option>
                            <option value="">女</option>
                        </select></td>
                        <td><input type="number" class='userage'></td>
                    </tr>
                </tbody>
            </table>
            <p><button class='ok'>确定</button>&nbsp;<button class='no'>取消</button></p>
        </div>
    </div>
</body>
<script>
    ;(function(){
        var data = [{
                "number": "001",
                "name": "李狗蛋",
                "gender": "男",
                "age": 16
            },
            {
                "number": "002",
                "name": "王大柱",
                "gender": "女",
                "age": 17
            },
            {
                "number": "003",
                "name": "李葫芦",
                "gender": "男",
                "age": 15
            },
            {
                "number": "004",
                "name": "小明",
                "gender": "男",
                "age": 18
            },
            {
                "number": "005",
                "name": "小红",
                "gender": "女",
                "age": 16
            }
        ];
        //获取元素
        var btn = document.querySelector('.btn')
        var add = document.querySelector('.add')
        var username = document.querySelector('.username')
        var userid = document.querySelector('.userid')
        var userage = document.querySelector('.userage')
        var ok = document.querySelector('.ok')
        var no = document.querySelector('.no')
        var sel = document.querySelector('#sel')
        var tb1 = document.querySelector('.tb1')
        var tbody = document.querySelector('.tb1 tbody')
        for(var i = 0; i < data.length; i++){
            addrow(data[i])
        }
        function addrow(data){
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for(var key in data){
                var td = document.createElement('td');
                tr.appendChild(td);
                td.innerText = data[key];
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<button class="up">上移</button> <button class="down">下移</button> <button class="del">删除</button>'
            td.children[0].onclick = upClick
            td.children[1].onclick = downClick
            td.children[2].onclick = delClick
        }
        function delClick(){
            tbody.removeChild(this.parentNode.parentNode)
        }
        function upClick(){
            if(!this.parentNode.parentNode.previousElementSibling){
                alert('已经最顶部了');
                return;
            }
            tbody.insertBefore(this.parentNode.parentNode,this.parentNode.parentNode.previousElementSibling)
        }
        function downClick(){
            if(!this.parentNode.parentNode.nextElementSibling){
                alert('已经最底部了');
                return
            }
            tbody.insertBefore(this.parentNode.parentNode.nextElementSibling,this.parentNode.parentNode)
        }
        //注册事件
        btn.onclick = function(){
            add.style.display = 'block';
        }
        no.onclick = function(){
            add.style.display = ''
        }
        ok.onclick = function(){
            for(var i = 0; i < sel.children.length; i++){
                if(sel.children[i].selected){
                    var text = sel.children[i].innerText
                }
            }
            var obj = {
                "number": userid.value,
                "name": username.value,
                "gender": text,
                "age": userage.value
            }
            addrow(obj);
            add.style.display = ''
        }

    }())
</script>
<script src="../jquery-1.12.4.js"></script>
<script>
    // $(function(){
    //     var data = [{
    //             "number": "001",
    //             "name": "李狗蛋",
    //             "gender": "男",
    //             "age": 16
    //         },
    //         {
    //             "number": "002",
    //             "name": "王大柱",
    //             "gender": "女",
    //             "age": 17
    //         },
    //         {
    //             "number": "003",
    //             "name": "李葫芦",
    //             "gender": "男",
    //             "age": 15
    //         },
    //         {
    //             "number": "004",
    //             "name": "小明",
    //             "gender": "男",
    //             "age": 18
    //         },
    //         {
    //             "number": "005",
    //             "name": "小红",
    //             "gender": "女",
    //             "age": 16
    //         }
    //     ];
    //     for (var i = 0; i < data.length; i++){
    //         var arr = []
    //         arr.push('<tr>')
    //         for(var key in data[i]){
    //             arr.push('<td>'+data[i][key]+'</td>')
    //         }
    //         arr.push('<td><button id="up">上移</button> <button id="down">下移</button> <button id="del">删除</button></td>')
    //         arr.push('</tr>')
    //         var str = arr.join('')
    //         $(str).appendTo($('.tb1 tbody'))
    //     }
    //     $('.btn').click(function(){
    //         $('.add').show()
    //     })
    //     $('.no').click(function(){
    //         $('.add').hide()
    //     })
    //     $('.ok').on('click',function(){
    //         $('<tr><td>'+$('.userid').val()+'</td><td>'+$('.username').val()+'</td><td>'+$('#sel option:selected').text()+'</td><td>'+$('.userage').val()+'</td><td><button id="up">上移</button> <button id="down">下移</button> <button id="del">删除</button></tr>').appendTo('.tb1')
    //         $('.add').hide()
    //     })
    //     $('.tb1 tbody').on('click','#up',function(){
    //         if(!$(this).parent().parent()[0].previousElementSibling){
    //             alert('已经最顶部了')
    //             return;
    //         }
    //         $(this).parent().parent().insertBefore($(this).parent().parent().prev())
    //     })
    //     $('.tb1 tbody').on('click','#down',function(){
    //         $(this).parent().parent().insertAfter($(this).parent().parent().next())
    //     })
    //     $('.tb1 tbody').on('click','#del',function(){
    //         $(this).parent().parent().remove()
    //     })
    // })
</script>
</html>